<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<link rel="stylesheet" href="${ctx}/css/ui/activity/counterfoil.css">
<style type="text/css">
    .post_pay_item .post_pay_item_top span:first-child {
        border-left: 0px;
    }
</style>
<!-- 票据 -->
<div class="post_main_r">
    <div id="payitemDiv" class="onlyone">
        <div class="post_pay_item">
            <div class="post_pay_item_top">
                <span class="tit02">赛事阶段</span>
                <span class="tit02">赛事地点</span>
                <span class="tit02">里程(km)</span>
                <span class="tit03" style="flex: 0.5">操作</span>
            </div>
            <div class="cost_container">
                <c:if test="${fn:length(schedules) == 0}">
                    <div class="cost_item cost-item-new" data-id="">
                        <div class="cost_content">
                            <div class="form_input_cost form_input_play_day">
                                <input type="text" placeholder="请选择赛程日期" name="playDayStr" class="input play_day_str" readonly>
                            </div>
                            <div class="form_input_cost form_input_place">
                                <input type="text" placeholder="请输入赛事地点" name="place" class="input cost_place">
                            </div>
                            <div class="form_input_cost form_input_place">
                                <input type="text" placeholder="请输入里程数" name="distance" class="input cost_distance">
                            </div>
                            <div class="form_option">
                                <a title="删除" class="controlClear" href="javascript:void(0)" style="display: none;">
                                    <i class="icon iconfont icon-delete"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </c:if>
                <c:if test="${fn:length(schedules) > 0}">
                    <c:set var="hasResult" value="false"/>
                    <c:forEach var="schedule" varStatus="status" items="${schedules}">
                        <c:set var="hasResult" value="${schedule.resultNum > 0 ? true : false}"/>
                        <div class="cost_item cost-item-new" data-id="${schedule.id}">
                            <div class="cost_content">
                                <div class="form_input_cost form_input_play_day">
                                    <input type="text" placeholder="请选择赛程日期" name="playDayStr"
                                           class="input play_day_str" value="<fmt:formatDate value="${schedule.playDay}" pattern="yyyy-MM-dd HH:mm"/>">
                                </div>
                                <div class="form_input_cost form_input_place">
                                    <input type="text" placeholder="请输入赛事地点" name="place" class="input cost_place" value="${schedule.place}">
                                </div>
                                <div class="form_input_cost form_input_place">
                                    <input type="text" placeholder="请输入里程数" name="distance" class="input cost_distance" value="${schedule.distance}">
                                </div>
                                <div class="form_option">
                                    <c:if test="${hasResult == false}">
                                        <a class="controlClear" href="javascript:void(0)"><i class="icon iconfont icon-delete"></i></a>
                                    </c:if>
                                </div>
                            </div>
                        </div>
                    </c:forEach>
                </c:if>
            </div>
        </div>
    </div>
    <div class="post_main_fee2 mt20">
        <a href="javascript:addItem()" class="layui-btn layui-btn-danger"> <i class="iconfont icon-add btn-icon"></i>添加赛事日程</a>
    </div>
    <div id="hiddenForm"></div>
</div>
<script type="text/html" id="item_template">
    <div class="cost_item cost-item-new" data-id="">
        <div class="cost_content">
            <div class="form_input_cost form_input_play_day">
                <input type="text" name="playDayStr" placeholder="请选择赛程日期" class="input play_day_str" readonly>
            </div>
            <div class="form_input_cost form_input_place">
                <input type="text" name="place" placeholder="请输入赛事地点" class="input cost_place">
            </div>
            <div class="form_input_cost form_input_place">
                <input type="text" name="distance" placeholder="请输入里程数" class="input cost_distance">
            </div>
            <div class="form_option">
                <a title="删除" class="controlClear"><i class="icon iconfont icon-delete"></i></a>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="hidden_template">
    <div class="hidden-field">
        <input type="hidden" name="schedules[{{ d.index }}].id" value="{{ d.id }}"/>
        <input type="hidden" name="schedules[{{ d.index }}].playDayStr" value="{{ d.playDayStr }}"/>
        <input type="hidden" name="schedules[{{ d.index }}].place" value="{{ d.place }}"/>
        <input type="hidden" name="schedules[{{ d.index }}].distance" value="{{ d.distance }}"/>
    </div>
</script>
<script type="text/javascript" charset="utf-8">
    var form, laytpl, laydate;

    $(function () {
        layui.use(['form', 'laytpl', 'laydate'], function () {
            form = layui.form, laytpl = layui.laytpl, laydate = layui.laydate;

            initPlayDay();
        });

        function hideDel() {
            var length = $(".cost_container").find(".cost_item").length;
            if (length == 1) {
                $(".cost_container").find(".cost_item").find(".controlClear").hide();
            }
        }

        hideDel();

        $('#payitemDiv').delegate('.icon-delete', 'click', function (e) {
            var $target = $(e.target);
            // length = 1表示更新；length=表示新增
            var length = $target.closest(".cost_item").find(".cost_id").length;
            if (length == 0) {
                $target.closest(".cost_item").remove();
            } else {
                $target.closest(".cost_item").hide();
                $target.closest(".cost_item").removeClass("cost_item");
            }
            // 如果只有一种票了，则不能删除
            length = $(".cost_container").find(".cost_item").length;
            if (length == 1) {
                $(".cost_container").find(".cost_item").find(".controlClear").hide();
            }
            e.stopPropagation();
        });
    });

    function initPlayDay() {
        $(".form_input_play_day").each(function (index, ele) {
            // 查询发布日期
            var playDay = {
                elem: $(ele).find('.play_day_str')[0],
                // min: new Date().Format("yyyy-MM-dd HH:mm:ss"),
                type: 'datetime',
                format: 'yyyy-MM-dd HH:mm'
            };
            laydate.render(playDay);
        })
    }

    function addItem() {
        var length = $(".cost_container").find(".cost_item").length;
        var getTpl = $("#item_template").html();
        laytpl(getTpl).render({
            isGoods: '${isGoods}',
            length: length
        }, function (html) {
            $(".cost_container").append(html);

            initPlayDay();
        });

        $(".cost_container").find(".cost_item").find(".controlClear").show();
    }

    // 1.日程不能重复
    // 2.里程数为数字且大于0
    function checkCost(eventTime) {
        $(".cost_container").find("input").removeClass("error_bd_red");
        var _payNameArr = new Array();
        var flag = true;
        $(".cost_container").find(".cost_item").each(function (index, element) {
            var $cost = $(element);
            var play_day_str = $cost.find(".play_day_str").val();
            var cost_place = $cost.find(".cost_place").val();
            var cost_distance = $cost.find(".cost_distance").val();

            // play_day_str
            if (!util.isValid(play_day_str)) {
                $cost.find(".play_day_str").addClass("error_bd_red");
                util.layerMsgError("请选择赛程日期")
                flag = false;
                return flag;
            }

            var stdt = new Date(eventTime.replace("-", "/"));
            var playdt = new Date(play_day_str.replace("-", "/"));
            if (playdt < stdt) {
                $cost.find(".play_day_str").addClass("error_bd_red");
                util.layerMsgError("赛程日期不得早于赛事日期")
                flag = false;
                return flag;
            }

            for (var m = 0; m < _payNameArr.length; m++) {
                if (_payNameArr[m] == play_day_str) {
                    $cost.find(".play_day_str").addClass("error_bd_red");
                    util.layerMsgError("赛程日期已存在，请重新选择")
                    flag = false;
                    return flag;
                }
            }
            _payNameArr.push(play_day_str);

            // cost_place
            if (!util.isValid(cost_place)) {
                $cost.find(".cost_place").addClass("error_bd_red");
                util.layerMsgError("请输入赛事地点")
                flag = false;
                return flag;
            }

            // cost_distance
            if (!util.isValid(cost_distance)) {
                $cost.find(".cost_distance").addClass("error_bd_red");
                util.layerMsgError("请输入里程数")
                flag = false;
                return flag;
            }
            var desc, isError = false;
            if (!util.checkNumber(cost_distance)) {
                desc = "里程数必须是数字";
                isError = true;
            } else if (parseInt(cost_distance) < 1) {
                desc = "里程数必须大于0";
                isError = true;
            }
            if (isError) {
                $cost.find(".cost_distance").addClass("error_bd_red");
                util.layerMsgError(desc)
                flag = false;
                return flag;
            }
            $cost.find("input").removeClass("error_bd_red");
        });
        return flag;
    }

    // 重置下标
    function submitBefore(data, cb) {
        // 重新标索引
        $(".cost_container").find(".cost-item-new").each(function (index, element) {
            var length = $(".hidden-field").length;
            var map = {
                index: length,
                id: $(element).data("id"),
                playDayStr: $(element).find("[name=playDayStr]").val(),
                place: $(element).find("[name=place]").val(),
                distance: $(element).find("[name=distance]").val()
            };
            var $content = $("#hiddenForm");
            var getTpl = $("#hidden_template").html();
            laytpl(getTpl).render(map, function (html) {
                $content.append(html);
            });
        });

        cb(data);
    }
</script>